<template>
  <button><router-link to="/home" active-class="ooo">home</router-link></button>
  <button><router-link to="/about" exact-active-class="ooo">About</router-link></button>
  <button><router-link to="/mime" active-class="ooo">Mime</router-link></button>
  <router-link to="/mime" active-class="ooo">
    <!-- 通过默认插槽控制渲染出来的目标元素 -->
    <button>Mime</button>
  </router-link>
  <router-link to="/mime" active-class="ooo" v-slot="SlotProps" custom>
    <!-- <span>{{ SlotProps }}</span> -->
    <!-- navigate方法就是之前的跳转方法 -->
    <button @click="SlotProps.navigate">点击</button>
    {{SlotProps.isActive}}
  </router-link>
  <hr />
  <router-view></router-view>
</template>

<script>
export default {
  setup() {},
}
</script>

<style scoped>
.ooo {
  background-color: pink;
}
</style>
